<template>
  <laker-dialog
    ref="dialogRef"
    v-model="visible"
    title="设备风险清单"
    width="900"
    height="900"
    :show-fullscreen="true"
    :show-close="true"
    destroy-on-close
    @closed="$emit('closed')"
    :fullscreen="true"
  >
    <el-row :gutter="2">
      <el-col :span="8">
        <table class="laker-table">
          <tr>
            <th :colspan="6">设备风险</th>
          </tr>
          <tr>
            <th style="width: 80px">系统</th>
            <th style="width: 80px">单元</th>
            <th style="width: 80px">重要程度</th>
            <th style="width: 80px">状态</th>
            <th style="width: 80px">风险等级</th>
            <th style="width: 80px">详情</th>
          </tr>
          <tr v-for="(item, index) in dataList" :key="index">
            <td>{{ item.xtName }}</td>
            <td>{{ item.dyName }}</td>
            <td>{{ item.sbLevel }}</td>
            <td>{{ item.sbSta }}</td>
            <td :class="item.fxdj">{{ formatDict('fxdj', item.fxdj) }}</td>
            <td><el-button type="primary" icon="el-icon-more-filled" circle @click="openDetail(item)"></el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="8">
        <table class="laker-table">
          <tr>
            <th :colspan="7">设备分项状态</th>
          </tr>
          <tr>
            <th style="width: 80px">分项</th>
            <th style="width: 100px">专业/班组</th>
            <th style="width: 50px">I值</th>
            <th style="width: 50px">单项总分</th>
            <th style="width: 60px">单项最高分</th>
            <th style="width: 80px">风险等级</th>
            <th style="width: 80px">详情</th>
          </tr>
          <tr v-for="(item, index) in dataList2" :key="index">
            <td>{{ item.fxName }}</td>
            <td>{{ item.groupName }}</td>
            <td>{{ item.iValue }}</td>
            <td>{{ item.totalValue }}</td>
            <td>{{ item.maxValue }}</td>
            <td :class="item.fxdj">{{ formatDict('fxdj', item.fxdj) }}</td>
            <td><el-button type="primary" icon="el-icon-more-filled" circle @click="openDetail2(item)"></el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="8">
        <table class="laker-table">
          <tr>
            <th :colspan="4">设备分项扣分</th>
          </tr>
          <tr>
            <th style="width: 80px">扣分类别</th>
            <th style="width: 80px">扣分项目</th>
            <th style="width: 50px">扣分</th>
            <th>扣分原因</th>
          </tr>
          <tr v-for="(item, index) in dataList3" :key="index">
            <td>{{ item.dudeType }}</td>
            <td>{{ item.dudeName }}</td>
            <td>{{ item.dudeValue }}</td>
            <td>{{ item.dudeDsc }}</td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </laker-dialog>
</template>

<script>
import LakerDialog from '@/components/lakerDialog/index.vue'
import { dayjs } from 'element-plus'
import dprevent from '@/api/dprevent'

export default {
  name: 'SbfxList',
  components: { LakerDialog },
  emits: ['success', 'closed'],
  data() {
    return {
      dialog: {
        raDialog: false
      },
      mode: 'add',
      visible: false,
      titleMap: {
        add: '选择设备类型',
        edit: '编辑人员',
        show: '查看'
      },
      elmain: 'elmain',
      today: dayjs().format('YYYY-MM-DD'),
      risk01: 0,
      dataList: [],
      dataList2: [],
      dataList3: [],
      dictData: {
        fxdj: [
          { value: 'VH', label: '重大风险' },
          { value: 'H', label: '较大风险' },
          { value: 'N', label: '一般风险' },
          { value: 'L', label: '低风险' }
        ]
      }
    }
  },
  mounted() {
    this.getApiData()
  },
  methods: {
    getApiData() {
      dprevent.getSbfxList().then((res) => {
        if (res.code === 'success') {
          if (res.result) {
            this.dataList = res.result
          }
        }
      })
    },
    getSbfxfxList() {
      dprevent.getSbfxfxList().then((res) => {
        if (res.code === 'success') {
          if (res.result) {
            this.dataList2 = res.result
          }
        }
      })
    },
    getSbfxkfList() {
      dprevent.getSbfxkfList().then((res) => {
        if (res.code === 'success') {
          if (res.result) {
            this.dataList3 = res.result
          }
        }
      })
    },
    formatDict(column, cellValue) {
      const dictList = this.dictData[column]
      let label = cellValue
      if (dictList) {
        dictList.forEach((element) => {
          if (element.value === cellValue) {
            label = element.label
          }
        })
      }
      return label
    },
    //显示
    open(mode = 'add') {
      this.mode = mode
      this.visible = true
      return this
    },
    openDetail() {
      this.getSbfxfxList()
    },
    openDetail2() {
      this.getSbfxkfList()
    },
    close() {
      this.visible = false
      return this
    },
    //表单注入数据
    setData(data) {
      console.log(data)
    }
  }
}
</script>

<style scoped lang="scss"></style>
